<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#kan {
				width: 300px;
				height: 150px;
				/* border: 1px solid black; */
				position: absolute;
				top: 200px;
				left: 300px;
				overflow: hidden;

			}

			#p1 {
				width: 300px;
				height: 150px;
				position: absolute;

			}

			#p2 {
				width: 300px;
				height: 150px;
				position: absolute;
				top: 0px;
				left: -300px;

			}

			#p3 {
				width: 300px;
				height: 150px;
				position: absolute;
				top: 0px;
				left: 300px;

			}

			#left {
				width: 30px;
				height: 30px;
				position: absolute;
				top: 260px;
				left: 300px;
			}

			#right {
				width: 30px;
				height: 30px;
				position: absolute;
				top: 260px;
				left: 570px;
			}

			#left img {
				width: 30px;
				height: 30px;
			}

			#right img {
				width: 30px;
				height: 30px;
			}
		</style>
	</head>
	<body>
		<div id="kan">
			<img src="img/1.jpg" id="p1" />
			<img src="img/2.jpg" id="p2" />
			<img src="img/3.jpg" id="p3" />
		</div>
		<div id="left">
			<img src="img/左右.png" />
		</div>
		<div id="right">
			<img src="img/右下一张.png" />
		</div>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$('#left').on('click', function() {
				var a = setInterval(function() {
					var l = $('#p1').css('left');
					var g = $('#p2').css('left');
					var h = $('#p3').css('left');
					var b = '0px';
					if (g == b) {
						$('#p1').animate({
							'left': '-=300px'
						}, 500);
						$('#p2').animate({
							'left': '-=300px'
						}, 500);
						$('#p3').css('left', '300px');
					}
					if (h == b) {
						$('#p1').css('left', '300px');
						$('#p2').animate({
							'left': '-=300px'
						}, 500);
						$('#p3').animate({
							'left': '-=300px'
						}, 500);
					}
					if (l == b) {
						$('#p1').animate({
							'left': '-=300px'
						}, 500);
						$('#p2').css('left', '300px');
						$('#p3').animate({
							'left': '-=300px'
						}, 500);
					}
					clearInterval(a);
				}, 1000)

			});
			$('#right').on('click', function() {
				var a = setInterval(function() {
					var l = $('#p1').css('left');
					var g = $('#p2').css('left');
					var h = $('#p3').css('left');
					var b = '-300px';
					if (g == b) {
						$('#p1').animate({
							'left': '+=300px'
						}, 500);
						$('#p2').animate({
							'left': '+=300px'
						}, 500);
						$('#p3').css('left', '-300px');
					}
					if (h == b) {
						$('#p1').css('left', '-300px');
						$('#p2').animate({
							'left': '+=300px'
						}, 500);
						$('#p3').animate({
							'left': '+=300px'
						}, 500);
					}
					if (l == b) {
						$('#p1').animate({
							'left': '+=300px'
						}, 500);
						$('#p2').css('left', '-300px');
						$('#p3').animate({
							'left': '+=300px'
						}, 500);
					}
					clearInterval(a);
				}, 1000)

			});
		</script>
	</body>
</html>
